<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3动画定义方式详解</title>
	<style>
		/*定义css3动画*/
		@-webkit-keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		@-moz-keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		@-o-keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		@keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		div{
			width: 200px;
			height: 200px;
			background: orange;
		}
		div#logo_2{
			margin-top: 20px;
		}
		#logo{
			/*分开属性定义动画*/
			/*省略浏览器前缀*/

			/*定义动画名称*/
			animation-name: animate;
			/*定义动画持续时间*/
			animation-duration: 3s;
			/*定义动画的速度曲线
			1、linear 动画从头到尾的速度是相同的
			2、ease 默认。动画以低速开始，然后加快，在结束时变慢
			3、ease-in 动画以低速开始
			4、ease-out 动画以低速结束
			5、ease-in-out 动画以低速开始和结束
			6、cubic-bezier(n,n,n,n) 可能的值是从0到1
			*/
			animation-timing-function: linear;
			/*定义动画开始之前的延迟时间*/
			animation-delay: 1s;
			/*定义动画播放的次数*/
			animation-iteration-count: 10;
			/*定义是否应该轮流反向播放动画
			1、normal 默认，动画应该正常播放
			2、alternate 动画应该轮流反向播放
			*/
			animation-direction: alternate;
			/*定义动画是否正在运行或暂停
			1、paused 暂停
			2、running 播放
			*/
			animation-play-state: running;
			/*定义动画时间之外的状态
			1、none 不改变默认行为
			2、forwards 当动画完成后，保持最后一个属性值
			3、backwards 在animation-delay所指定的一段时间内，在动画显示之前应用开始属性值
			4、both 向前和向后填充模式都被应用
			*/
			animation-fill-mode: none;
		}
		/*快捷方法定义动画*/
		#logo_2{
			/*顺序依次为 动画名称 动画持续时间 动画的速度曲线 动画开始之前的延迟时间 动画播放次数 是否轮流反向播放动画*/
			-webkit-animation : animate 3s linear 1s 10 alternate;
		}
	</style>
</head>
<body>
	<div id="logo"></div>
	<div id="logo_2"></div>
</body>
</html>